<template>
  <div class="dashboard-container">
    <!-- 头部 -->

    <page-tools :show-before="true" class="aaa">
      <span slot="before">共{{ total }}条记录</span>
      <template #after>
        <el-button type="primary" size="mini" @click="$router.push({path: '/import'})">导入</el-button>
        <el-button type="primary" size="mini" @click="dialogVisible = true">提醒</el-button>
        <el-button type="primary" size="mini" @click="setattendances">设置</el-button>
        <el-button type="primary" size="mini" @click="$router.push({ path: '/history'})">历史归档</el-button>
        <el-button type="primary" size="mini" @click="$router.push({path:'/archiving',query:{'atteDate':atteDate}})"> {{ month }} 月份报表</el-button>
      </template>

      <template #button>
        <div>部门:</div>
        <div>
          <template>
            <div style="margin: 15px 0" />
            <el-checkbox-group v-model="checkedCities" @change="citieschange">
              <el-checkbox v-for="(item,index) in cities" :key="index" :label="item">{{
                item
              }}</el-checkbox>
            </el-checkbox-group>
          </template>
        </div>
        <br>
        <el-row>
          <span>考勤状态:</span>
          <el-radio-group v-model="radio">
            <el-radio
              v-for="item in attendance.holidayType"
              :key="item.id"
              :label="item.id"
            >{{ item.value }}</el-radio>
          </el-radio-group>
        </el-row>
      </template>
    </page-tools>

    <!-- 内容  表格 -->
    <el-card class="aaa">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="username" label="姓名" width="150" />
        <el-table-column prop="workNumber" label="工号" width="120" />
        <el-table-column prop="departmentName" label="部门" width="120" />
        <el-table-column prop="mobile" label="手机" width="120" />
        <el-table-column
          v-for="(item, index) in day"
          :key="item"
          :label="item.toString()"
        >
          <template #default="{ row }">
            {{ row.attendanceRecord[index].adtStatu | adtStatu }}
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-pagination
          small
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>

    <!-- 提醒的弹窗 -->
    <el-dialog
      title="提醒"
      :visible.sync="dialogVisible"
      width="15%"
    >
      <span>系统将通过邮件与短信的形式，对全体员工中存在旷工的考勤进行提醒，该提醒每月仅可发送 1 次。</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">我知道了</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 设置的弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="setdialogVisible"
      width="50%"
      @close="btnCenceltime"
    >

      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="出勤设置" name="first">
            <el-form v-if="setdialogVisible" ref="ruleForm" :model="ruleForm" :rules="ruleForm.rules" label-width="100px" class="demo-ruleForm">
              <el-form-item label="部门" prop="section">
                <template>
                  <el-select v-model="ruleForm.id" placeholder="请选择" @change="sectionchange">
                    <el-option
                      v-for="item in ruleForm.options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </template>
              </el-form-item>
              <el-form-item label="出勤时间" prop="attendancetime">
                <template>
                  <el-time-select
                    v-model="ruleForm.startTime"
                    width="50px"
                    placeholder="起始时间"
                    default-value=""
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30'
                    }"
                  />
                  <span>-</span>
                  <el-time-select
                    v-model="ruleForm.endTime"
                    placeholder="结束时间"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30',
                      minTime: ruleForm.startTime
                    }"
                  />
                  <span>-</span>

                </template>
                <template>
                  <el-time-select
                    v-model="ruleForm.startTimenight"
                    placeholder="起始时间"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30'
                    }"
                  />
                  <span>-</span>

                  <el-time-select
                    v-model="ruleForm.endTimenight"
                    placeholder="结束时间"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30',
                      minTime: ruleForm.startTimenight
                    }"
                  />

                </template>

              </el-form-item>

              <el-row type="flex" justify="center">
                <el-button type="primary" @click="btnOksettime">保存更新</el-button>
                <el-button @click="btnCenceltime">取 消</el-button>
              </el-row>

            </el-form>

          </el-tab-pane>
          <el-tab-pane label="请假管理" name="second">
            <el-form v-if="setdialogVisible" ref="leaveForm" :model="leaveForm" :rules="leaveForm.leaverules" label-width="100px" class="demo-ruleForm">
              <el-form-item label="部门" prop="section">
                <template>
                  <el-select v-model="leaveForm.id" placeholder="请选择" @change="leavechange">
                    <el-option
                      v-for="item in leaveForm.options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </template>
              </el-form-item>
              <el-form-item class="Holidaytypes">
                假期类型
              </el-form-item>
              <el-form-item>
                <template>
                  <el-table
                    :data="leavetableData"
                    style="width: 100%"
                  >
                    <el-table-column
                      prop="name"
                      label="类型"
                      width="180"
                    />
                    <el-table-column
                      prop="isEnable"
                      label="是否可用"
                      width="180"
                    >
                      <template #default="{ row }">
                        <el-switch
                          v-model="row.isEnable"
                          active-color="#13ce66"
                          inactive-color="#ff4949"
                        />
                      </template>

                    </el-table-column>

                  </el-table>
                </template>
              </el-form-item>

              <el-row type="flex" justify="center">
                <el-button type="primary" @click="btnOksetleave">保存更新</el-button>
                <el-button @click="btnCenceleave">取 消</el-button>
              </el-row>
              <el-row>
                <el-alert
                  title="事假 请假单位为0.5天 只能提交工作日内的请假单
                当请假开关关闭后，员工则不可在员工端提交请假申请"
                  type="warning"
                  show-icon
                />
              </el-row>

            </el-form>
          </el-tab-pane>
          <el-tab-pane label="扣款管理" name="third">
            <el-form v-if="setdialogVisible" ref="withholdForm" :model="withholdForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="部门" prop="section">
                <template>
                  <el-select v-model="withholdForm.id" placeholder="请选择" @change="withholdchange">
                    <el-option
                      v-for="item in withholdForm.options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </template>
              </el-form-item>
              <el-form-item>
                <span>迟到扣款</span>
                <el-tooltip :content="'withholdForm.input1: ' + withholdForm.input1" placement="top">
                  <el-switch
                    v-model="withholdForm.input1"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-value="0"
                    inactive-value="1"
                  />
                </el-tooltip>
              </el-form-item>
              <div class="late">
                <el-row>
                  迟到≤
                  <el-input
                    v-model="withholdForm.input2"
                    class="small"
                  />
                  分钟
                </el-row>
              </div>
              <div class="late2">
                <el-row style="magin-left='150px'">
                  迟到≤
                  <el-input
                    v-model="withholdForm.input3"
                    class="small"
                  />
                  次,
                  每次扣款
                  <el-input
                    v-model="withholdForm.input4"
                    class="small"
                  />
                  元
                </el-row>
                <el-row style="magin-left='300px'">
                  迟到>
                  <el-input
                    v-model="withholdForm.input5"
                    class="small"
                  />
                  次,
                  每次扣款
                  <el-input
                    v-model="withholdForm.input6"
                    class="small"
                  />
                  元
                </el-row>
              </div>
              <div class="late">
                <el-row>
                  迟到>
                  <el-input
                    v-model="withholdForm.input7"
                    class="small"
                  />
                  分钟
                </el-row>
              </div>
              <div class="late2">

                <el-row style="magin-left='300px'">
                  迟到>
                  <el-input
                    v-model="withholdForm.input8"
                    class="small"
                  />
                  次,
                  每次旷工
                  <el-input
                    v-model="withholdForm.input9"
                    class="small"
                  />
                  天
                </el-row>
              </div>
              <el-form-item>
                <span>早退扣款</span>
                <el-switch
                  v-model="withholdForm.input10"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  inactive-value="0"
                />
              </el-form-item>
              <div class="late">
                <el-row>
                  早退≤
                  <el-input
                    v-model="withholdForm.input11"
                    class="small"
                  />
                  分钟
                </el-row>

              </div>
              <div class="late2">
                <el-row style="magin-left='150px'">
                  早退≤
                  <el-input
                    v-model="withholdForm.input12"
                    class="small"
                  />
                  次,
                  每次扣款
                  <el-input
                    v-model="withholdForm.input13"
                    class="small"
                  />
                  元
                </el-row>
                <el-row style="magin-left='150px'">
                  早退>
                  <el-input
                    v-model="withholdForm.input14"
                    class="small"
                  />
                  次,
                  每次扣款
                  <el-input
                    v-model="withholdForm.input15"
                    class="small"
                  />
                  元
                </el-row>
              </div>
              <div class="late">
                <el-row>
                  早退>
                  <el-input
                    v-model="withholdForm.input16"
                    class="small"
                  />
                  分钟
                </el-row>

              </div>
              <div class="late2">
                <el-row style="magin-left='150px'">
                  早退>
                  <el-input
                    v-model="withholdForm.input17"
                    class="small"
                  />
                  次,
                  每次旷工
                  <el-input
                    v-model="withholdForm.input18"
                    class="small"
                  />
                  天
                </el-row>
              </div>
              <el-form-item>
                <span>矿工扣款</span>
                <el-switch
                  v-model="withholdForm.input19"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  inactive-value="0"
                />
              </el-form-item>
              <div class="late">
                <el-row>
                  旷工按
                  <el-input
                    v-model="withholdForm.input20"
                    class="small"
                  />
                  被工资处罚
                </el-row>

              </div>

              <el-row type="flex" justify="center">
                <el-button type="primary" @click="btnOksetwithhold">保存更新</el-button>
                <el-button @click="btnCencewithhold">取 消</el-button>
              </el-row>

            </el-form>

          </el-tab-pane>
          <el-tab-pane label="加班设置" name="fourth">
            <el-form v-if="setdialogVisible" ref="overtimeForm" :model="overtimeForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="部门:" prop="section">
                <template>
                  <el-select v-model="overtimeForm.id" placeholder="请选择" @change="overtimechange">
                    <el-option
                      v-for="item in overtimeForm.options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </template>
              </el-form-item>
              <el-form-item label="加班规则:">
                <el-row>
                  <el-switch
                    v-model="overtimeForm.value"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  />
                  <span>工作日可申请加班</span>
                </el-row>

              </el-form-item>

              <el-row type="flex" justify="center">
                <el-button type="primary" @click="btnOksetovertime">保存更新</el-button>
                <el-button @click="btnCencelovertime">取 消</el-button>
              </el-row>

            </el-form>
          </el-tab-pane>
        </el-tabs>
      </template>

    </el-dialog>
  </div>
</template>

<script>
import { Getattendances, GetattendSetByid, getleavetype, setleavetype, getwithholdtypebyid, setwithholdtype, getovertimebyid } from '@/api/approvals'
import { getDepartments } from '@/api/departments'
import attendance from '@/api/constant/attendance'

export default {
  filters: {
    adtStatu(i) {
      const res = attendance.vacationtype.filter(
        (item) => item.id === i.toString()
      )
      // console.log(res)
      return res[0].name
    },
    leavetype() {
      const res = attendance.type.filter(item => item.name)
      console.log(res)
    }
  },
  data() {
    return {
      month: '',
      atteDate: '',
      overtimeForm: {
        options: [],
        id: '',
        value: ''

      },
      leavetableData: [],
      withholdForm: {
        options: [],
        id: '',
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        input5: '',
        input6: '',
        input7: '',
        input8: '',
        input9: '',
        input10: '',
        input11: '',
        input12: '',
        input13: '',
        input14: '',
        input15: '',
        input16: '',
        input17: '',
        input18: '',
        input19: '',
        input20: ''
      },
      leaveForm: {
        options: [],
        id: '',
        leaverules: {
          section: [
            { required: true, message: '请选择部门', trigger: 'blur' }
          ]
        }
      },
      id: '',
      ruleForm: {
        id: '',
        options: [],
        startTime: '',
        endTime: '',
        startTimenight: '',
        endTimenight: '',
        rules: {
          section: [
            { required: true, message: '请选择部门', trigger: 'blur' }
          ],
          attendancetime: [
            { required: true, message: '请选择出勤时间', trigger: 'blur' }
          ]

        }
      },
      activeName: 'first',
      setdialogVisible: false,
      dialogVisible: false,
      adstatu: '',
      total: 0,
      attendance,
      radio: '',
      checkedCities: [],
      cities: [],
      data: {
        page: 1,
        pagesize: 10
      },
      tableData: [],
      day: []
    }
  },
  created() {
    // 渲染页面
    this.Getattendances()
    const data = new Date()
    const month = (data.getMonth() + 1).toString()
    this.month = month
    const atteDate = data.getUTCFullYear().toString() + ((data.getMonth() + 1) < 10 ? '0' + (data.getMonth() + 1) : (data.getMonth() + 1)).toString()
    // console.log(day)
    this.atteDate = atteDate
  },
  mounted() {
    if (this.$route.query.newmouth) {
      const str = this.$route.query.newmouth

      this.month = str > 10 ? str.toString().substr(2) : str
    }
  },
  methods: {
    async Getattendances() {
      // 获取部门信息
      const res = await getDepartments()
      this.cities = []

      res.depts.forEach((item, index) => {
        // console.log(item, index)
        this.cities.push(item.name)
      })

      const obj = await Getattendances(this.data)
      this.total = obj.data.total
      this.tableData = obj.data.rows
      // console.log(obj)

      const day = this.tableData[0].attendanceRecord.length
      this.day = []
      for (let i = 1; i <= day; i++) {
        this.day.push(`5/${i}`)
      }
    },
    // 点击页码
    handleCurrentChange(page) {
      // console.log(page)
      this.data.page = page
      this.Getattendances()
    },
    // 点击设置
    async  setattendances() {
      // 获取部门信息
      this.setdialogVisible = true
      const res = await getDepartments()
      this.ruleForm.options = res.depts
      this.ruleForm.id = res.depts[0].id
      const ids = new FormData()
      ids.append('departmentId', this.ruleForm.id)
      // console.log(res)
      const obj = await GetattendSetByid(ids)
      this.ruleForm.startTime = obj.morningStartTime
      this.ruleForm.endTime = obj.morningEndTime
      this.ruleForm.startTimenight = obj.afternoonStartTime
      this.ruleForm.endTimenight = obj.afternoonEndTime
      // console.log(11111)
      this.$forceUpdate()
      // console.log(obj)
      // 打开弹框
    },
    // 点击保存考勤时间
    async btnOksettime() {
      // 发请求
      // const res = await Setattendances({
      //   morningStartTime: this.ruleForm.startTime,
      //   morningEndTime: this.ruleForm.endTime,
      //   afternoonStartTime: this.ruleForm.startTimenight,
      //   afternoonEndTime: this.ruleForm.endTimenight
      // })
      // console.log(res)
      // 关闭弹框
      this.setdialogVisible = false
    },
    // 取消保存考勤时间
    btnCenceltime() {
      this.activeName = 'first'
      // 清除数据
      this.ruleForm = {
        id: '',
        options: [],
        startTime: '',
        endTime: '',
        startTimenight: '',
        endTimenight: '',
        rules: {
          section: [
            { required: true, message: '请选择部门', trigger: 'blur' }
          ],
          attendancetime: [
            { required: true, message: '请选择出勤时间', trigger: 'blur' }
          ]

        }
      }
      // 清除表单验证
      this.$refs.ruleForm.resetFields()
      // 关闭弹框
      this.setdialogVisible = false
    },
    // 部门切换时考勤时间修改
    async  sectionchange(item) {
      // console.log(item)
      const ids = new FormData()
      ids.append('departmentId', item)
      // console.log(res)
      const obj = await GetattendSetByid(ids)
      this.ruleForm = {
        ...this.ruleForm,
        startTime: obj.morningStartTime,
        endTime: obj.morningEndTime,
        startTimenight: obj.afternoonStartTime,
        endTimenight: obj.afternoonEndTime
      }
    },

    citieschange(i) {
      // console.log(i)
    },
    // 点击切换考勤设置tabs时触发
    async  handleClick(tab, event) {
      console.log(tab, event)
      // 请假管理
      if (tab.name === 'second') {
        const res = await getDepartments()
        this.leaveForm.options = res.depts
        this.leaveForm.id = res.depts[0].id
        const ids = new FormData()
        ids.append('departmentId', this.leaveForm.id)
        this.leavetableData = this.attendance.type
        const obj = await getleavetype(ids)

        obj.forEach((item, index) => {
          item.name = this.attendance.type[index].name
          if (item.isEnable === 0) {
            item.isEnable = true
          } else {
            item.isEnable = false
          }
        })
        this.leavetableData = obj
        // console.log(obj)
        // console.log(this.leavetableData)
      }
      // 扣款管理
      if (tab.name === 'third') {
        const res = await getDepartments()
        this.withholdForm.options = res.depts
        this.withholdForm.id = res.depts[0].id
        const ids = new FormData()
        ids.append('departmentId', this.withholdForm.id)
        console.log(111111, this.withholdForm.input1)
        const obj = await getwithholdtypebyid(ids)
        console.log(obj)
        this.withholdForm.input1 = obj[0].isEnable
        this.withholdForm.input2 = obj[0].periodLowerLimit
        this.withholdForm.input3 = obj[0].timesLowerLimit
        this.withholdForm.input4 = obj[0].dedAmonutUpperLimit
        this.withholdForm.input5 = obj[0].timesUpperLimit
        this.withholdForm.input6 = obj[0].dedAmonutLowerLimit
        this.withholdForm.input7 = obj[0].dedAmonutLowerLimit
        this.withholdForm.input8 = obj[0].dedAmonutUpperLimit
        this.withholdForm.input9 = obj[0].absenceDays
        this.withholdForm.input10 = obj[1].isEnable
        this.withholdForm.input11 = obj[1].periodLowerLimit
        this.withholdForm.input12 = obj[1].timesLowerLimit
        this.withholdForm.input13 = obj[1].dedAmonutUpperLimit
        this.withholdForm.input14 = obj[1].timesUpperLimit
        this.withholdForm.input15 = obj[1].dedAmonutLowerLimit
        this.withholdForm.input16 = obj[1].dedAmonutLowerLimit
        this.withholdForm.input17 = obj[1].dedAmonutUpperLimit
        this.withholdForm.input18 = obj[1].absenceDays
        this.withholdForm.input19 = obj[2].isEnable
        this.withholdForm.input20 = obj[2].fineSalaryMultiples
        console.log(this.withholdForm)

        // console.log(22222, this.withholdForm.input1, obj[0].isEnable)
      }
      // 加班管理
      if (tab.name === 'fourth') {
        const res = await getDepartments()
        this.overtimeForm.options = res.depts
        this.overtimeForm.id = res.depts[0].id
        const ids = new FormData()
        ids.append('departmentId', this.overtimeForm.id)
        const obj = await getovertimebyid(ids)
        console.log(obj)
      }
    },
    // 点击保存请假的设置
    async btnOksetleave() {
      this.leavetableData.forEach((item, index) => {
        if (item.isEnable === true) {
          item.isEnable = 0
        } else {
          item.isEnable = 1
        }
      })
      console.log(this.leavetableData)
      // 发请求
      await setleavetype(this.leavetableData)

      // console.log(res)
      // 关闭弹窗
      this.setdialogVisible = false
    },
    // 点击取消保存请假的设置
    btnCenceleave() {
      // 清除数据
      this.leaveForm = {
        id: '',
        options: []
      }
      // 清除表单验证
      this.$refs.leaveForm.resetFields()
      // 关闭弹框
      this.setdialogVisible = false
    },
    // 部门切换时假期类型的修改
    async leavechange(item) {
      const ids = new FormData()
      ids.append('departmentId', item)
      const obj = await getleavetype(ids)
      this.leavetableData = this.attendance.type
      obj.forEach((item, index) => {
        item.name = this.attendance.type[index].name
        if (item.isEnable === 0) {
          item.isEnable = true
        } else {
          item.isEnable = false
        }
      })
      this.leavetableData = obj
      if (this.leavetableData.length === 0) {
        this.leavetableData = this.attendance.type
      }
      console.log(this.leavetableData)
    },
    // 部门切换时扣款的修改
    withholdchange() {

    },
    // 点击保存扣款的修改
    async btnOksetwithhold() {
      // 发请求
      const res = await getDepartments()
      this.withholdForm.options = res.depts
      this.withholdForm.id = res.depts[0].id
      const ids = new FormData()
      ids.append('departmentId', this.withholdForm.id)
      const obj = await getwithholdtypebyid(ids)
      obj[0].isEnable = this.withholdForm.input1
      obj[0].periodLowerLimit = this.withholdForm.input2
      obj[0].timesLowerLimit = this.withholdForm.input3
      obj[0].dedAmonutUpperLimit = this.withholdForm.input4
      obj[0].timesUpperLimit = this.withholdForm.input5
      obj[0].dedAmonutLowerLimit = this.withholdForm.input6
      obj[0].dedAmonutLowerLimit = this.withholdForm.input7
      obj[0].dedAmonutUpperLimit = this.withholdForm.input8
      obj[0].absenceDays = this.withholdForm.input9
      obj[1].isEnable = this.withholdForm.input10
      obj[1].periodLowerLimit = this.withholdForm.input11
      obj[1].timesLowerLimit = this.withholdForm.input12
      obj[1].dedAmonutUpperLimit = this.withholdForm.input13
      obj[1].timesUpperLimit = this.withholdForm.input14
      obj[1].dedAmonutLowerLimit = this.withholdForm.input15
      obj[1].dedAmonutLowerLimit = this.withholdForm.input16
      obj[1].dedAmonutUpperLimit = this.withholdForm.input17
      obj[1].absenceDays = this.withholdForm.input18
      obj[2].isEnable = this.withholdForm.input19
      obj[2].fineSalaryMultiples = this.withholdForm.input20
      await setwithholdtype(obj)
      console.log(obj)
      this.setdialogVisible = false
    },
    // 点击取消修改扣款
    btnCencewithhold() {
      // 重置表单
      this.withholdForm = {
        options: [],
        id: '',
        isEnable: '',
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        input5: '',
        input6: '',
        input7: '',
        input8: '',
        input9: '',
        input10: '',
        input11: '',
        input12: '',
        input13: '',
        input14: '',
        input15: '',
        input16: '',
        input17: '',
        input18: '',
        input19: '',
        input20: ''
      }
      // 关闭弹框
      this.setdialogVisible = false
    },
    // 部门发生改变时 加班设置发生的改变
    overtimechange() {

    },
    // 点击保存加班设置
    btnOksetovertime() {

    },
    // 点击取消保存加班设置
    btnCencelovertime() {

    }

    // handleCheckedCitiesChange(value) {
    //   const checkedCount = value.length
    //   this.checkAll = checkedCount === this.cities.length
    //   this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    // }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.el-date-editor--time-select{
   width: 15%;
}
::v-deep.buttons{
   margin: 0;
}
::v-deep.Holidaytypes{
   margin: 0;
}
::v-deep.small{
  width: 50px;
}
::v-deep.late{
  margin-left: 200px;
}
::v-deep.late2{
  margin-left: 300px;
}
.aaa{
  margin: 20px;
}

</style>
